<template>
    <div class="search">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            class="input"
        />
        <span>搜索发现</span>
        <p>
            <strong
                v-for="(t,index) in textList"
                :key="index"
                @click="setVal(t.findKeyWord)"
                >
                    {{t.findKeyWord}}
                </strong>
        </p>
    </div>
</template>

<script>
import { instance } from '@/utils/http'
import Vue from 'vue'
import { Search } from 'vant'

import { mapMutations } from 'vuex'
Vue.use(Search)
export default {
  data () {
    return {
      value: '',
      textList: []
    }
  },
  methods: {
    ...mapMutations('publicShow', ['cover']),
    onSearch (val) {
      this.$router.push()
    },
    onCancel () {
      this.cover()
    },
    setVal (data) {
      this.value = data
    }
  },
  created () {
    if (!this.textList.length) {
      instance.get('/appapi/search/searchFind/v3')
        .then(res => {
          this.textList = res.data.searchFindList
          console.log(this.textList)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
html,body {
    height: 100%;
}
.search {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 14;
    width: 100%;
    height: 100%;
    background: #fff;
    span {
        margin: .12rem 0 .3rem .12rem;
        justify-content: space-between;
        font-size: .18rem;
        color: black;
    }
    p {
        width: 3.51rem;
        margin-left: .12rem;
        strong {
            float: left;
            width: 1.09rem;
            margin: 0 .12rem .12rem 0;
            font-size: .13rem;
            text-align: center;
            line-height: .4rem;
            background: rgb(245,245,245);
            &:nth-of-type(3n) {
                margin-right: 0;
            }
        }
    }
}
</style>
